<template>
  <div class="spl-container">
    <div class="spl-breadcrumb">
      <div class="spl-index">
        <el-row>
          <el-col :span="14" class="text-left">你好，<span v-text="currentInfo.userName"></span></el-col>
          <el-col :span="10" class="text-right"><span  v-text="this.curData"></span><span class="ml-10" v-text="this.curWeek"></span></el-col>
        </el-row>
      </div>
    </div>
    <div class="index-bg">
      <div class="index-bg-content clearfix">
        <div class="fl">
          <p class="bg-title">欢迎来到SPF-Pal人事管理系统</p>
          <p class="bg-text">SPF-Pal是一个为企业提供人事管理的Saas平台，高效便捷的系统操作，让企业管理更精细化，提升企业运营效率和管理效能</p>
        </div>
        <div class="fl">
          <img class="index-bg-icon" src="../../assets/images/index-bg-icon.png" alt="">
        </div>
      </div>
    </div>

    <div class="type-list">
      <el-row>
        <el-col :span="8" class="type">
          <div class="inlineBlock f-cursor" @click="goUrl('/employeeList')">
            <img src="../../assets/images/index-type-1.png" alt="">
            <p class="text">员工信息</p>
          </div>
        </el-col>
        <el-col :span="8" class="type">
          <div class="inlineBlock f-cursor">
            <img src="../../assets/images/index-type-2.png" alt="">
            <p class="text">结算单</p>
          </div>
        </el-col>
        <el-col :span="8" class="type">
          <div class="inlineBlock f-cursor" @click="goUrl('/billManage')">
            <img src="../../assets/images/index-type-3.png" alt="">
            <p class="text">账单管理</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      currentInfo: {},
      curData: '',
      curWeek: ''
    }
  },
  created () {
    this.getCurrentInfo()
    this.getDate()
  },
  computed: {

  },
  methods: {
    // 获取当前登录用户的信息
    getCurrentInfo () {
      this.$http({
        url: '/tenant/current/user',
        method: 'get',
        params: {}
      }).then(({ data }) => {
        if (data.code == 0) {
          this.currentInfo = data.data
        }
      })
    },

    // 获取日期信息
    getDate () {
      var mydate = new Date()
      var myddy = mydate.getDay()// 获取存储当前日期
      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.curWeek = weekday[myddy]
      this.curData = this.$moment(mydate).format('YYYY-MM-DD')
    },
    goUrl (activePath) {
      this.$router.push(activePath)
    }
  }
}
</script>
<style lang="less" scoped>
  .index-bg{
    height: 165px;
    width: calc(~"100% + 3px");
    margin-left: -3px;
    text-align: center;
    padding-top: 185px;
    background: url("../../assets/images/index-bg.png") no-repeat;
    .index-bg-icon{
      height: 189px;
      width: 386px;
      transform: scale(0.8);
      vertical-align: middle;
      margin-top: -100px;
    }
    .index-bg-content{
      display: inline-block;
      color: #fff;
      .bg-title{
        font-size: 22px;
      }
      .bg-text{
        margin-top: 30px;
      }
    }
  }
  .type-list{
    padding: 40px 30px 15px 30px;
    text-align: center;
    .text{
      margin-top: 10px;
    }
  }
</style>
